<template>
    <div>
        <title-bar :title="titleText | titleFilter"/>
        <scroller>
          <div class="warapper">
            <text class="text">{{filterText | afterFiltration}}</text>

            <text class="text">{{computedText}}</text>

            <div class="rowClass">
            <text @click="onIf" class="text">{{useIf}}</text>
            <text v-if="ifState" style="margin-left:10px;" class="text">{{ifText}}</text>
            </div>

            
            <div class="rowClass">
            <text @click="onShow" class="text">{{useShow}}</text>
            <text v-show="showState" style="margin-left:10px;" class="text">{{showText}}</text>
            </div>

            <div class=" rowClass">
                <text class="text">计算属性:计算前{{computedText}}</text>
                <text class="text">计算后{{computedMessage}}</text>
            </div>

            <div class=" rowClass">
                <text class="text" @click="clickPointMe">观察者:{{pointMe}}</text>
                <text class="text">旧值:{{watchOld}}---新值{{watchNew}}</text>
            </div>


        </div>
        </scroller>
    </div>
</template>
<script>
import TitleBar from "../components/TitleBar";
import { toast } from "../utils/config";
export default {
  components: {
    TitleBar
  },
  data: {
    titleText: "学习Vue",
    filterText: "过滤前：TxT",
    computedText:
      "计算属性的结果会被缓存，除非依赖的值发生改变才会重新计算，否则使用缓存",
    useIf: "v-if  点击显示/隐藏内容",
    ifText: "if内容",
    ifState: false,
    useShow: "v-show  点击显示/隐藏内容",
    showState: false,
    showText: "show内容",
    computedText: "Hello",
    pointMe: "点我",
    watchNew: "0",
    watchOld: "B123"
  },
  watch: {
    watchOld: function(val, oldVal) {
      // toast(oldVal);
      // this.WatchOld = oldVal;
      this.watchNew = val;
    }
  },
  methods: {
    filterVerification: function() {
      return "filtering failde value is empty";
    },
    onIf: function() {
      let self = this;
      self.ifState = !self.ifState;
    },
    onShow: function() {
      toast("test");
      let self = this;
      self.showState = !self.showState;
    },
    clickPointMe() {
      let self = this;
      self.watchNew = "A123";
      // toast(self.WatchOld);
    }
  },
  computed: {
    computedMessage: function() {
      return this.computedText
        .split("")
        .reverse()
        .join("");
    }
  },
  filters: {
    titleFilter: function(value) {
      let self = this;
      if (!value) self.filterVerification();
      return value + "-Api";
    },
    afterFiltration: function(value) {
      let self = this;
      if (!value) self.filterVerification();
      return value + "---过滤后:Text";
    }
  }
};
</script>
<style>
.warapper {
  justify-content: center;
  align-items: center;
}
.text {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-color: #41b883;
  border-width: 2px;
  border-radius: 10px;
  padding: 25px;
  background-color: #3eaf7c;
  margin-top: 20px;
}
.rowClass {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>


